<!-- 初始化和管理响应式设计，确保Web应用能够在不同设备和屏幕尺寸上正常显示 -->
 <!--自己实现的自适应布局，基于rem方案在可变rem的基础上实现了不同设备有不同的缩放比例-->
<!-- 组件模板部分，使用 slot 允许插入其他内容 -->
<template>
  <slot />
</template>
<script setup>
// 导入 Vue 3 的 onMounted 函数
import { onMounted } from "vue";

// 使用 defineProps 定义组件的 props，包括基础字号、断点对象和设计尺寸对象
const props = defineProps({
  baseFontSize: {
    type: Number,
    default: 16,
  },
  breakPoints: {
    type: Object,
    default: () => ({
      // 断点宽度设置
      xs: 600,
      sm: 900,
      md: 1200,
      lg: 1500,
      xl: 1800,
    }),
  },
  designSize: {
    type: Object,
    default: () => ({
      // 不同设备尺寸的最小宽度设置
      min_xs_v: 375, // 手机竖屏
      min_xs_h: 812, // 手机横屏
      xs_sm_v: 576, // 小平板竖屏
      xs_sm_h: 1024, // 小平板横屏
      sm_md_v: 720, // 大平板竖屏
      sm_md_h: 1280, // 大平板横屏
      md_lg_v: 768, // 小笔记本竖屏
      md_lg_h: 1366, // 小笔记本横屏
      lg_xl_v: 900, // 大笔记本竖屏
      lg_xl_h: 1600, // 大笔记本横屏
      xl_max_v: 1080, // 显示器竖屏
      xl_max_h: 1920, // 显示器横屏
    }),
  },
});

// 初始化响应式设计
function initResponsive() {
  // 判断是否是移动设备
  const isMobile = () => {
    // 使用 CSS 媒体查询来判断设备类型
    const mql = window.matchMedia("(pointer: coarse)");
    return mql.matches;
  };

  // 判断是否是暗黑模式
  const isDarkmode = () => {
    // 使用 prefers-color-scheme 媒体查询或时间来判断暗黑模式
    const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");
    if (isDarkTheme.matches) {
      return true;
    }
    const currdate = new Date();
    return currdate.getHours() >= 19 || currdate.getHours() < 7;
  };

  // 判断屏幕方向是否是竖屏
  const isVertical = () => {
    // 使用 orientation 媒体查询来判断屏幕方向
    const mql = window.matchMedia("(orientation: portrait)");
    return mql.matches;
  };

  // 初始化类名，根据设备类型和主题添加相应的类名
  const classListInit = () => {
    // 根据 isMobile、isDarkmode 和 isVertical 的结果，切换 documentElement 的类名
    if (isMobile()) {
      document.documentElement.classList.remove("pc");
      document.documentElement.classList.add("mobile");
    } else {
      document.documentElement.classList.remove("mobile");
      document.documentElement.classList.add("pc");
    }
    if (isDarkmode()) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  };

  // 初次调用 classListInit 函数
  classListInit();

  // 对服务器端渲染（SSR）进行处理，设置全局变量
  const ssrBuryingPoint = () => {
    // 如果是暗黑模式，设置全局变量 isDarkmode 为 true
    if (isDarkmode()) {
      window.isDarkmode = true;
    }
  };
  ssrBuryingPoint();

  // 监听类名变化
  const classListChange = () => {
    // 类似 classListInit，但是用于媒体查询变化后的更新
    if (isMobile()) {
      document.documentElement.classList.remove("pc");
      document.documentElement.classList.add("mobile");
    } else {
      document.documentElement.classList.remove("mobile");
      document.documentElement.classList.add("pc");
    }
  };

   // 初始化字体大小
  const fontSizeInit = () => {
    // 根据当前屏幕宽度和设计尺寸，计算并设置合适的字体大小
    const docEl = document.documentElement;
    const fontSize = window.FontSize;
    const breakPoints = window.BreakPoints;
    const designSize = window.DesignSize;
    if (docEl) {
      let rem;
      if (docEl.clientWidth <= breakPoints.xs) {
        if (isVertical()) {
          rem = fontSize * 0.8 * (docEl.clientWidth / designSize.min_xs_v);
        } else {
          rem = fontSize * 0.8 * (docEl.clientWidth / designSize.min_xs_h);
        }
      } else if (
        breakPoints.xs < docEl.clientWidth &&
        docEl.clientWidth <= breakPoints.sm
      ) {
        if (isVertical()) {
          rem = fontSize * 0.85 * (docEl.clientWidth / designSize.xs_sm_v);
        } else {
          rem = fontSize * 0.85 * (docEl.clientWidth / designSize.xs_sm_h);
        }
      } else if (
        breakPoints.sm < docEl.clientWidth &&
        docEl.clientWidth <= breakPoints.md
      ) {
        if (isVertical()) {
          rem = fontSize * 0.9 * (docEl.clientWidth / designSize.sm_md_v);
        } else {
          rem = fontSize * 0.9 * (docEl.clientWidth / designSize.sm_md_h);
        }
      } else if (
        breakPoints.md < docEl.clientWidth &&
        docEl.clientWidth <= breakPoints.lg
      ) {
        if (isVertical()) {
          rem = fontSize * 0.95 * (docEl.clientWidth / designSize.md_lg_v);
        } else {
          rem = fontSize * 0.95 * (docEl.clientWidth / designSize.md_lg_h);
        }
      } else if (
        breakPoints.lg < docEl.clientWidth &&
        docEl.clientWidth <= breakPoints.xl
      ) {
        if (isVertical()) {
          rem = fontSize * (docEl.clientWidth / designSize.lg_xl_v);
        } else {
          rem = fontSize * (docEl.clientWidth / designSize.lg_xl_h);
        }
      } else if (breakPoints.xl < docEl.clientWidth) {
        if (isVertical()) {
          rem = fontSize * 1.05 * (docEl.clientWidth / designSize.xl_max_v);
        } else {
          rem = fontSize * 1.05 * (docEl.clientWidth / designSize.xl_max_h);
        }
      }
      docEl.style.fontSize = rem + "px";
    }
  };
  fontSizeInit();

  // 监听窗口大小变化，调整字体大小和类名
  window.addEventListener("resize", () => {
    fontSizeInit();
    setTimeout(() => {
      classListChange();
    }, 20);
  });
}

// 组件挂载后，设置全局变量并调用 initResponsive 函数
onMounted(() => {
  // 设置基础字号、断点和设计尺寸的全局变量
  window.FontSize = props.baseFontSize;
  window.BreakPoints = props.breakPoints;
  window.DesignSize = props.designSize;
  initResponsive();
});
</script>
